---
type: tutorial
title: Envoyer votre premier script au navigateur
description: >-
  Tutoriel : Créer votre premier blog avec Astro —

  Ajoutez de l'interactivité côté client à votre navigation mobile avec 
  une balise de script Astro
i18nReady: true
---
import Blanks from '~/components/tutorial/Blanks.astro';
import Box from '~/components/tutorial/Box.astro';
import Checklist from '~/components/Checklist.astro';
import MultipleChoice from '~/components/tutorial/MultipleChoice.astro';
import Option from '~/components/tutorial/Option.astro';
import PreCheck from '~/components/tutorial/PreCheck.astro';
import { Steps } from '@astrojs/starlight/components';

Ajoutons un bouton pour ouvrir et fermer votre menu de navigation sur les tailles d'écran ciblant les mobiles, nécessitant une certaine interactivité côté client !

<PreCheck>
  - Créer un composant de menu
  - Rédiger un `<script>` pour permettre aux visiteurs de votre site d'ouvrir et de fermer le menu de navigation
  - Déplacer votre JavaScript dans son fichier `.js`
</PreCheck>

## Créer un composant Menu

Créez un composant `<Menu />` pour ouvrir et fermer votre menu mobile.

<Steps>
1. Créez un fichier nommé `Menu.astro` dans `src/components/`
  

2. Copiez le code suivant dans votre composant. Il crée un bouton qui sera utilisé pour basculer la visibilité des liens de navigation sur les appareils mobiles. (Vous ajouterez les nouveaux styles CSS au fichier « global.css » ultérieurement.)

    ```astro title="src/components/Menu.astro"
    --- 
    ---
    <button aria-expanded="false" aria-controls="main-menu" class="menu">
      Menu
    </button>
    ```

3. Placez ce nouveau composant `<Menu />` juste avant votre composant `<Navigation />` dans `Header.astro`. 

    <details>
    <summary>Montrez-moi le code !</summary>
    
    ```astro title="src/components/Header.astro" ins={2,7}
    ---
    import Menu from './Menu.astro';
    import Navigation from './Navigation.astro';
    ---
    <header>
      <nav>
        <Menu />
        <Navigation />
      </nav>
    </header>
    ```
    </details>

4. Ajoutez les styles suivants pour votre composant Menu, y compris certains styles adaptatifs :

    ```css title="src/styles/global.css" ins={2-9, 33-35, 51-53}
    /* Styles de la navigation */
    .menu {
      background-color: #0d0950;
      border: none;
      color: #fff;
      font-size: 1.2rem;
      font-weight: bold;
      padding: 5px 10px;
    }
  
    .nav-links {
      width: 100%;
      display: none;
      margin: 0;
    }
  
    .nav-links a {
      display: block;
      text-align: center;
      padding: 10px 0;
      text-decoration: none;
      font-size: 1.2rem;
      font-weight: bold;
      text-transform: uppercase;
      color: #0d0950;
    }
  
    .nav-links a:hover,
    .nav-links a:focus{
      background-color: #ff9776;
    }
  
    :has(.menu[aria-expanded="true"]) .nav-links {
      display: unset;
    }
  
    @media screen and (min-width: 636px) {
      .nav-links {
        margin-left: 5em;
        display: block;
        position: static;
        width: auto;
        background: none;
      }
  
      .nav-links a {
        display: inline-block;
        padding: 15px 20px;
      }
  
      .menu {
        display: none;
      }
    }
    ```
</Steps>


## Rédiger votre première balise de script

Votre en-tête n'est pas encore **interactif** car il ne peut pas réagir aux interactions de l'utilisateur, comme cliquer sur le menu pour afficher ou masquer les liens de navigation. 

L'ajout d'une balise `<script>` fournit du JavaScript côté client pour « écouter » un événement utilisateur, puis réagir en conséquence.

<Steps>
1. Ajoutez la balise `<script>` suivante à `index.astro`, en utilisant la prise en charge intégrée de TypeScript par Astro, juste avant la balise de fermeture `</body>`.

    ```astro title="src/pages/index.astro" ins={2-9}
      <Footer />
      <script>
        const menu = document.querySelector('.menu');

        menu?.addEventListener('click', () => {
          const isExpanded = menu.getAttribute('aria-expanded') === 'true';
          menu.setAttribute('aria-expanded', `${!isExpanded}`);
        });
      </script>
    </body>
    ```

2. Consultez à nouveau l'aperçu de votre navigateur en utilisant différentes tailles, et vérifiez que vous avez un menu de navigation fonctionnel qui est à la fois réactif à la taille de l'écran et réagit aux interactions de l'utilisateur sur cette page.
</Steps>

### Importation d'un fichier `.js`

Au lieu d'écrire votre JavaScript directement sur chaque page, vous pouvez déplacer le contenu de votre balise `<script>` dans son propre fichier `.js` dans votre projet.

<Steps>
1. Créez `src/scripts/menu.js` (vous devrez créer un nouveau dossier `/scripts/`) et déplacez-y votre JavaScript.

    ```js title="src/scripts/menu.js"
    const menu = document.querySelector('.menu');

    menu?.addEventListener('click', () => {
      const isExpanded = menu.getAttribute('aria-expanded') === 'true';
      menu.setAttribute('aria-expanded', `${!isExpanded}`);
    });
    ```

2. Remplacez le contenu de la balise `<script>` dans `index.astro` par l'importation de fichier suivante :

    ```astro title="src/pages/index.astro" ins={10} del={3-8}
      <Footer />
      <script>
        const menu = document.querySelector('.menu');

        menu?.addEventListener('click', () => {
          const isExpanded = menu.getAttribute('aria-expanded') === 'true';
          menu.setAttribute('aria-expanded', `${!isExpanded}`);
        });

        import "../scripts/menu.js";
      </script>
    </body>
    ```

3. Contrôlez à nouveau votre aperçu de navigateur à une taille plus petite et vérifiez que le menu est toujours capable d'ouvrir et de fermer vos liens de navigation. 


4. Ajoutez la même balise `<script>` avec l'importation sur vos deux autres pages, `about.astro` et `blog.astro`, et vérifiez que vous avez un en-tête réactif et interactif sur chaque page.

    ```astro title="src/pages/about.astro & src/pages/blog.astro" ins={2-4}
      <Footer />
      <script>
        import "../scripts/menu.js";
      </script>
    </body>
    ```
</Steps>

:::note[À retenir]
Vous aviez précédemment utilisé un peu de JavaScript pour construire des parties de votre site :

- Définir les titres de la fenêtre et de votre page dynamiquement
- Parcourir une liste de compétences sur la page « À propos »
- Afficher conditionnellement des éléments HTML

Ces commandes sont toutes exécutées au moment de la compilation pour créer du HTML statique pour votre site, puis le code est « jeté ». 

**Le JavaScript dans une balise `<script>` est envoyé au navigateur** et peut être exécuté en fonction des interactions de l'utilisateur, comme actualiser une page ou changer l'état d'un élément interactif.
:::



<Box icon="question-mark">

### Tester vos connaissances

1. Quand Astro exécute-t-il le JavaScript écrit dans le frontmatter d'un composant ?
    <MultipleChoice>
      <Option>
       Astro n'exécute jamais de JavaScript
      </Option>
      <Option isCorrect>
        au moment de la compilation
      </Option>
      <Option>
         Lorsqu'un visiteur clique sur un bouton
      </Option>
    </MultipleChoice>

2. En option, Astro peut envoyer du JavaScript au navigateur pour permettre :
    <MultipleChoice>
      <Option>
        aux utilisateurs de cliquer sur des liens de page
      </Option>
      <Option>
        des temps de chargement plus rapides
      </Option>
      <Option isCorrect>
        de l'interactivité côté client
      </Option>
    </MultipleChoice>

3. Le JavaScript côté client sera envoyé au navigateur d'un utilisateur quand il est écrit ou importé :
    <MultipleChoice>
      <Option isCorrect>
        dans des balises `<script>`
      </Option>
      <Option>
        entre les délimiteurs de code d'un fichier `.astro`
      </Option>
      <Option>
        dans un fichier `global.css`
      </Option>
    </MultipleChoice>

</Box>

<Box icon="check-list">

## Liste de contrôle

<Checklist>
- [ ] Je peux ajouter de l'interactivité côté client avec du JavaScript dans une balise `<script>`.
- [ ] Je peux importer un fichier `.js` dans une balise `<script>`.
</Checklist>

</Box>

### Ressources

[Les scripts côté client dans Astro](/fr/guides/client-side-scripts/)
